<template>
  <div class="schedule-container">
    <div class="schedule-main">
      <div class="schedule-header">
        <h2>我的课表</h2>
        <div class="semester-info">{{ formattedSemester }}</div>
      </div>
      <el-table
        :data="scheduleData"
        :row-class-name="getRowClass"
        :cell-class-name="getCellClass"
        :cell-style="{ padding: '5px' }"
        style="width: 100%">
        <el-table-column
          prop="time"
          label="时间"
          width="120"
          fixed>
        </el-table-column>
        <el-table-column
          v-for="day in weekDays"
          :key="day"
          :prop="day"
          :label="day"
          align="center">
          <template #default="{ row }">
            <div
              v-for="course in row[day]"
              :key="course.id"
              class="course-item"
              :style="getCourseColor(course.id)"
              @click="viewCourseDetail(course.id)">
              {{ course.name }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 右侧信息区域 -->
    <div class="schedule-sidebar">
      <div class="info-card">
        <h3>今日课程</h3>
        <div v-if="todayCourses.length > 0">
          <div v-for="course in todayCourses" :key="course.name" class="today-course-item">
            <span class="course-time">{{ course.time }}</span>
            <span class="course-name">{{ course.name }}</span>
          </div>
        </div>
        <div v-else class="no-course">
          今天没有课程安排
        </div>
      </div>

      <div class="info-card">
        <h3>课程统计</h3>
        <div class="stats-item">
          <span>总课程数</span>
          <span class="stats-value">{{ totalCourses }}</span>
        </div>
        <div class="stats-item">
          <span>本周课程</span>
          <span class="stats-value">{{ weekCourses }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseSchedule',
  props: {
    courses: {
      type: Array,
      default: () => []
    },
    currentSemester: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      timePeriods: [
        { time: '08:00-09:50', index: 1 },
        { time: '10:10-12:00', index: 2 },
        { time: '14:10-16:00', index: 3 },
        { time: '16:20-18:00', index: 4 },
        { time: '19:00-20:50', index: 5 },
        { time: '21:00-22:00', index: 6 }
      ],
      scheduleData: [],
      courseColors: {},
      colors: [
        {bg: '#E8F4FF', border: '#91C8FF'},
        {bg: '#FFF3E8', border: '#FFB74D'},
        {bg: '#E8F5E9', border: '#81C784'},
        {bg: '#F3E5F5', border: '#BA68C8'},
        {bg: '#FFF3E0', border: '#FFB74D'},
        {bg: '#E0F7FA', border: '#4DD0E1'},
        {bg: '#F3E5F5', border: '#AB47BC'},
        {bg: '#E8EAF6', border: '#7986CB'},
        {bg: '#FBE9E7', border: '#FF7043'},
        {bg: '#E0F2F1', border: '#26A69A'}
      ]
    }
  },
  computed: {
    formattedSemester() {
      if (!this.currentSemester) return '';

      const [year, code] = this.currentSemester.split('-');
      const nextYear = parseInt(year) + 1;
      const semester = code === '1000' ? '第一学期' : code === '2000' ? '第二学期' : '';

      return `${year}-${nextYear}学年${semester}`;
    },
    todayCourses() {
      const today = new Date().getDay() || 7;
      const dayKey = this.weekDays[today - 1];
      const todayCourses = [];

      this.scheduleData.forEach(timeSlot => {
        const courses = timeSlot[dayKey];
        if (courses && courses.length > 0) {
          courses.forEach(course => {
            todayCourses.push({
              time: timeSlot.time,
              name: course.name
            });
          });
        }
      });

      return todayCourses;
    },
    totalCourses() {
      return this.courses.length;
    },
    weekCourses() {
      let count = 0;
      this.scheduleData.forEach(row => {
        this.weekDays.forEach(day => {
          count += row[day].length;
        });
      });
      return count;
    }
  },
  methods: {
     generateScheduleData() {
      // 初始化课程颜色
      this.initializeCourseColors();

      this.scheduleData = this.timePeriods.map(period => {
        const row = { time: period.time };
        this.weekDays.forEach(day => {
          row[day] = [];
        });
        return row;
      });

      this.courses.forEach(course => {
        Object.entries(course.time).forEach(([day, periods]) => {
          periods.forEach(period => {
            const dayIndex = parseInt(day) - 1;
            const rowIndex = this.timePeriods.findIndex(p => p.index === period);
            if (rowIndex >= 0 && rowIndex < this.scheduleData.length) {
              // 将课程信息作为对象存储，包含id和name
              this.scheduleData[rowIndex][this.weekDays[dayIndex]].push({
                id: course.id,
                name: course.name
              });
            }
          });
        });
      });
    },
    initializeCourseColors() {
      this.courses.forEach((course, index) => {
        this.courseColors[course.id] = this.colors[index % this.colors.length];
      });
    },
    getCourseColor(courseId) {
      const color = this.courseColors[courseId];
      return {
        backgroundColor: color.bg,
        borderLeft: `3px solid ${color.border}`,
        cursor: 'pointer'
      };
    },
    viewCourseDetail(courseId) {
      this.$router.push(`/course/${courseId}`);
    },
    getRowClass({row, rowIndex}) {
      return 'schedule-row';
    },
    getCellClass({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) return 'time-column';
      return 'course-cell';
    },
  },
  watch: {
    courses: {
      handler() {
        this.generateScheduleData();
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
/* Styles remain the same */
.schedule-container {
  width: 100%;
  display: flex;
  gap: 20px;
  background-color: white;
}

.schedule-main {
  flex: 1;
  min-width: 800px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.schedule-sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.info-card h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 18px;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 10px;
}

.today-course-item {
  padding: 10px;
  margin-bottom: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.course-time {
  color: #66b1ff;
  font-size: 12px;
}

.course-name {
  color: #303133;
  font-weight: 500;
}

.no-course {
  color: #909399;
  text-align: center;
  padding: 20px 0;
}

.stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed #EBEEF5;
}

.stats-value {
  font-size: 20px;
  color: #409EFF;
  font-weight: bold;
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.schedule-header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.semester-info {
  color: #909399;
  font-size: 14px;
}

.course-item {
  padding: 8px;
  margin: 4px 0;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.course-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-table) {
  border: 1px solid #EBEEF5;
}

:deep(.el-table th) {
  background-color: #F5F7FA;
  color: #303133;
  font-weight: bold;
}

:deep(.el-table td) {
  padding: 8px 0;
}
</style>